<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="../../libs/bootstrap/4.0.0/bootstrap.css" rel="stylesheet">
    <script src="../../libs/jquery/3.3.1/jquery.js"></script>
    <script src="../../libs/popper.js/1.13.0/umd/popper.js"></script>
    <script src="../../libs/bootstrap/4.0.0/bootstrap.js"></script>

    <title>JQuery Bootstrap学习</title>
    <script>
        function Template(tpl) {
            var
                fn,
                match,
                code = ['var r=[];\nvar _html = function (str) { return str.replace(/&/g, \'&amp;\').replace(/"/g, \'&quot;\').replace(/\'/g, \'&#39;\').replace(/</g, \'&lt;\').replace(/>/g, \'&gt;\'); };'],
                re = /\{\s*([a-zA-Z\.\_0-9()]+)(\s*\|\s*safe)?\s*\}/m,
                addLine = function (text) {
                    code.push('r.push(\'' + text.replace(/\'/g, '\\\'').replace(/\n/g, '\\n').replace(/\r/g, '\\r') + '\');');
                };
            while (match = re.exec(tpl)) {
                if (match.index > 0) {
                    addLine(tpl.slice(0, match.index));
                }
                if (match[2]) {
                    code.push('r.push(String(this.' + match[1] + '));');
                }
                else {
                    code.push('r.push(_html(String(this.' + match[1] + ')));');
                }
                tpl = tpl.substring(match.index + match[0].length);
            }
            addLine(tpl);
            code.push('return r.join(\'\');');
            fn = new Function(code.join('\n'));
            this.render = function (model) {
                return fn.apply(model);
            };
        }
    </script>
    <script id="tpl" type="text/plain">
        <p>Today: { date }</p>
        <a href="/{ user.id|safe }">{ user.company }</a>
    </script>

</head>

<body>
    <div id="other"></div>
</body>
<script>
    var tpl = new Template($('#tpl').html());
    var s = tpl.render({
        date: 20150101,
        user: {
            id: 'A-000&001',
            company: 'AT&T'
        }
    });
    $('#other').html(s);
</script>

</html>